<template>
	<view class="kind">
		<tab-bar></tab-bar>
		<nav-bar></nav-bar>
		<view class="kind-info">
			<view class="kind-item" v-for="item in kindList">
				<view class="info" v-for="subItem in item" @tap="goGoodsList(subItem.id)">
					<view class="infmation">
						<view class="cname">{{ subItem.ctitle }}</view>
						<view class="ename">{{ subItem.etitle }}</view>
					</view>
					<image :src="subItem.img" mode=""></image>
				</view>
				<!-- {{ item }} -->
			</view>
		</view>
	</view>
</template>

<script>
import navBar from '../../components/NavBar/NavBar.vue';
import tabBar from '../../components/TabBar/TabBar.vue'
import { list } from '../../utils/kind/index.js';
export default {
	data() {
		return {
			kindList: []
		};
	},
	methods: {
		async getKindList() {
			let data = await list();
			// console.log(data);
			let tempObj = {};

			tempObj.subArr = [];
			tempObj.subArr.push(data.data.data.shift());
			tempObj.subArr1 = [];
			tempObj.subArr1.push(data.data.data.shift());
			tempObj.subArr2 = [];
			for (let i = 0; i < 2; i++) {
				tempObj.subArr2.push(data.data.data.shift());
			}
			this.kindList = tempObj;
			console.log(this.kindList);
		},
		goGoodsList (id) {
			console.log(id);
			uni.navigateTo({
				url:`/pages/kind/classese/classese?id=${id}`
			})
		}
	},
	onLoad() {
		this.getKindList();
	},
	components: {
		navBar,
		tabBar
	},
	onPullDownRefresh() {
		// console.log('用户下拉了');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {
		// console.log('触底了')
	},
};
</script>

<style lang="scss">
.kind {
	height: 100vw;
	min-height: 100vh;
	max-height: 100%;
	background: #354E44;
	padding-top: 90rpx;
	.kind-info {
		height: 100%;
		box-sizing: border-box;
		background-color: #f1ece7;
		border-radius: 50rpx 50rpx 0 0;
		padding: 64rpx 40rpx;
	}
	.kind-item {
		width: 100%;
		margin-bottom: 48rpx;
		&:first-child{
			background-color: #D5D5D5;
			box-shadow: 0 12rpx 20rpx 0 rgba(83,66,49,0.05);
			border-radius: 20rpx;
		}
		&:nth-child(2){
			background-color: #fff;
			box-shadow: 0 12rpx 20rpx 0 rgba(83,66,49,0.05);
			border-radius: 20rpx;
		}
		&:last-child{
			display: flex;
			width: 100%;
			.info {
				position: relative;
				width: 312rpx;
				height: 442rpx;
				background: #FAFAFA;
				box-shadow: 0 12rpx 20rpx 0 rgba(83,66,49,0.03);
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				&:last-child {
					image {
						width: 100%;
						height: 100%;
					}
				}
				&:first-child {
					margin-right: 46rpx;
					image{
						margin-top: 50rpx;
						width: 312rpx;
						height: 392rpx;
					}
				}
				.infmation {
					position: absolute;
					bottom: 0;
					left: 0;
					z-index: 10;
					
				}
			}
		}
		.info {
			width: 100%;
			height: 302rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			image {
				width: 416rpx;
				height: 252rpx;
			}
			.infmation {
				margin: 0 0 40rpx 58rpx;
				.cname {
					font-size: 48rpx;
					line-height: 67rpx;
					color: #3E3E3E;
					letter-spacing: 3.43rpx;
				}
				.ename{
					font-size: 30rpx;
					color: #7F7F7F;
					letter-spacing: 2.14rpx;
				}
			}
		}
	}
}
</style>
